<template>
<div id="groupview">
  <v-app id="inspire">
    <v-container>
      <v-select v-model="selectionType" :items="['leaf', 'independent']" label="Selection type"></v-select>
      <v-row>
        <v-col>
          <v-treeview
            v-model="selection"
            :items="items"
            :selection-type="selectionType"
            selectable
            return-object
            open-all
          ></v-treeview>
        </v-col>
        <v-divider vertical></v-divider>
        <v-col class="pa-6" cols="6">
          <template v-if="!selection.length">
            No nodes selected.
          </template>
          <template v-else>
            <div v-for="node in selection" :key="node.id">
              {{ node.name }}
            </div>
          </template>
        </v-col>
      </v-row>

    </v-container>
  </v-app>
</div>
</template>

<script>
export default {
    name: 'GroupView',
    data: () => ({
        selectionType: 'leaf',
        selection: [],
        items: [
            {
                id: 1,
                name: 'rabbitmq group',
                children: [
                    {id: 4, name: 'rabbitmq-01'},
                    {id: 5, name: 'rabbitmq-02'},
                ],
            },
            {
                id: 2,
                name: 'nginx group',
                children: [
                    {id: 6, name: 'nginx-01'},
                    {id: 7, name: 'nginx-02'},
                ],
            },
        ],
    })
}

</script>
